<template>
	<div class="navbar-top">
		<div class="w">
			<router-link to="/user">
				<div class="logo"><img src="@/assets/images/logo.png" alt="" /><span>Vue3</span></div>
			</router-link>
			<div class="search">search</div>
			<div class="nav-list">
				<ul>
					<li>1</li>
					<li v-if="!userinfo.token" class="register">
						<a href="">注册</a>
					</li>
					<li class="login">
						<SettingMenu v-if="userinfo.token"></SettingMenu>
						<a v-else href="javascript:void(0);">登录</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useUserinfoStore } from "@/stores/userinfo";
import { defineAsyncComponent } from "vue";
const SettingMenu = defineAsyncComponent(() => import("@/components/settingMenu.vue"));
const userinfo = useUserinfoStore();
</script>

<style scoped lang="scss">
.navbar-top {
	width: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0 1px 0px rgb(0 0 0 / 30%), 0 0 6px 2px rgb(0 0 0 / 15%);

	.w {
		display: flex;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		height: 50px;
		.logo {
			width: 40px;
			display: flex;
			align-items: center;
			img {
				width: 100%;
			}
			span {
				text-indent: 10px;
				color: #2c3e50;
				font-size: 21px;
			}
		}
		.nav-list {
			display: flex;
			ul {
				display: flex;
				align-items: center;
				li {
					padding: 0 10px;
					border-right: 1px solid $grey;
					a {
						color: #2c3e50;
					}
				}
				li:last-child {
					border: 0;
				}
			}
		}
	}
}
</style>
